<template>
  <view class="container">
    <view class="bg bg-color-base margin-b20">
			<div class="header-text">Hi，欢迎回来!</div>
		</view>

    <view class="tab vs-row vs-align-center">
			<view class="vs-row vs-align-center" style="display: flex;padding-top: 40rpx;">
				<view class="vs-column vs-align-center margin-r40" @click="cur = 0" style="position: relative;">
					<text class="font-50 margin-b2bg-color-base0" :class="[cur ? 'color-black-3': 'color-base']">登录</text>
					<view class="line bg-color-base" v-if="!cur"></view>
				</view>
				<view v-if="appletInfo && appletInfo.is_open_register === '1'" class="vs-column vs-align-center" @click="cur = 1" style="position: relative;">
					<text class="font-46 margin-b20" :class="[cur ? 'color-base': 'color-black-3']">注册</text>
					<view class="line bg-color-base" v-if="cur"></view>
				</view>
			</view>
		</view>

    <view v-if="cur === 0" class="login margin-b80">
      <view class="input vs-flex vs-row vs-align-center margin-b40">
				<u-icon class="input-icon margin-r20" name="account-fill" color="#56d39d" size="32"></u-icon>
        <input
          class="vs-flex-item color-base font-30"
          type="text"
          v-model="form.phone"
          :maxlength="11"
          placeholder="请输入您的手机号"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="input vs-flex vs-row vs-align-center margin-b40">
				<u-icon class="input-icon margin-r20" name="lock-fill" color="#56d39d" size="32"></u-icon>
        <input
          class="vs-flex-item color-base font-30"
          type="text"
          password
          v-model="form.password"
          placeholder="请输入您的登录密码"
          placeholder-class="input-placeholder"
        />
      </view>
    </view>

    <view v-if="cur === 1" class="login margin-b80">
      <view class="input vs-flex vs-row vs-align-center margin-b40">
				<u-icon class="input-icon margin-r20" name="account-fill" color="#56d39d" size="32"></u-icon>
        <input
          class="vs-flex-item color-base font-30"
          type="text"
          v-model="form.phone"
          :maxlength="11"
          placeholder="请输入您的手机号"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="input vs-flex vs-row vs-align-center margin-b40">
				<u-icon class="input-icon margin-r20" name="lock-fill" color="#56d39d" size="32"></u-icon>
        <input
          class="vs-flex-item color-base font-30"
          type="text"
          password
          v-model="form.password"
          placeholder="请输入您的登录密码"
          placeholder-class="input-placeholder"
        />
      </view>
    </view>

    <view
      class="
        button
        vs-flex
        bg-color-base
        vs-row vs-align-center vs-space-center
        margin-b20
      "
      @click="handleLogin"
    >
      <text class="color-white font-34">{{ cur === 0 ? '立即登录' : '立即注册' }}</text>
    </view>

    <view
      class="
        vs-row vs-flex vs-align-center vs-space-center
        margin-b100
        footer-password
      "
    >
      <text class="font-28">忘记密码，请联系平台管理员</text>
    </view>
  </view>
</template>

<script>
import { h5Login, h5Register, getH5AppletInfoByAppletType } from "@/api/user";
export default {
  data() {
    return {
      cur: 0,
      appletInfo: null,
      form: {
        phone: "",
        password: "",
      },
    };
  },

  onLoad() {
    this.getH5AppletInfoByAppletType();
    console.log(333,this.$route)
  },

  methods: {
    // 点击登录
    handleLogin() {
      let phone = this.form.phone;
      let password = this.form.password;
      if (phone.length !== 11) {
        uni.showToast({
          title: "手机号码电话格式错误，请检查",
          icon: "none",
        });
        return;
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        uni.showToast({
          title: "手机号码电话格式错误，请检查",
          icon: "none",
        });
        return;
      }
      if (this.cur === 0) {
        this.h5Login(phone, password);
      } else {
        this.h5Register(phone, password);
      }
    },

    // h5登录
    h5Login(phone, password) {
      uni.showLoading({title: '登录中'});
      h5Login({
        phone,
        password,
      }).then(async (result) => {
        uni.hideLoading();
        if (result && result.code === 200 && result.data && result.data.token) {
          if (result.data && result.data.status === 'invalid') {
            await this.$store.dispatch('setToken', '');
            uni.showModal({
              title: '温馨提示',
              content: '账号异常，请联系运营方。',
              showCancel: false,
              success: ({ confirm, cancel }) => {
                
              }
            })
          } else {
            const userInfo = result.data.userInfo;
            uni.setStorageSync("token", result.data.token);
            await this.$store.dispatch("setToken", result.data.token);
            await this.$store.dispatch("setUserInfo", userInfo);
            await this.$store.dispatch(
              "setCheckVersion",
              result.data.appletVersion
            );
            // 如果存在用户的头像和名称，则表示已经授权登录过
            if (userInfo.merchant_id) {
              await this.$store.dispatch("setIsLogin", true);
            }
            uni.reLaunch({
              url: "/pages/index/index",
            });
          }
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },

    // h5注册
    h5Register(phone, password) {
      uni.showLoading({title: '注册中'});
      h5Register({
        phone,
        password,
        applet_id: this.appletInfo.id
      }).then(async (result) => {
        console.log(result);
        uni.hideLoading();
        if (result && result.data && result.data.merchant_id && result.data.user_id) {
          this.h5Login(phone, password);
        }
      }).catch(() => {
        uni.hideLoading();
      });;
    },

    // 获取应用信息
    getH5AppletInfoByAppletType() {
      getH5AppletInfoByAppletType().then(result => {
        if (result && result.data) {
          this.appletInfo = result.data;
        }
      })
    }
  },
};
</script>

<style lang="scss">
// 下边距
.margin-b5 {
  margin-bottom: 5rpx;
}
.margin-b10 {
  margin-bottom: 10rpx;
}
.margin-b15 {
  margin-bottom: 15rpx;
}
.margin-b20 {
  margin-bottom: 20rpx;
}
.margin-b25 {
  margin-bottom: 25rpx;
}
.margin-b30 {
  margin-bottom: 30rpx;
}
.margin-b40 {
  margin-bottom: 40rpx;
}
.margin-b60 {
  margin-bottom: 60rpx;
}
.margin-b80 {
  margin-bottom: 80rpx;
}
.margin-b100 {
  margin-bottom: 100rpx;
}

// 右边距
.margin-r5 {
  margin-right: 5rpx;
}
.margin-r10 {
  margin-right: 10rpx;
}
.margin-r15 {
  margin-right: 15rpx;
}
.margin-r20 {
  margin-right: 20rpx;
}
.margin-r25 {
  margin-right: 25rpx;
}
.margin-r30 {
  margin-right: 30rpx;
}
.margin-r40 {
  margin-right: 40rpx;
}
.margin-r60 {
  margin-right: 60rpx;
}

// 字体大小
.font-18 {
  font-style: normal;
  font-size: 18rpx;
  font-family: Droid Sans Fallback;
}
.font-20 {
  font-style: normal;
  font-size: 20rpx;
  font-family: Droid Sans Fallback;
}
.font-22 {
  font-style: normal;
  font-size: 22rpx;
  font-family: Droid Sans Fallback;
}
.font-24 {
  font-style: normal;
  font-size: 24rpx;
  font-family: Droid Sans Fallback;
}
.font-26 {
  font-style: normal;
  font-size: 26rpx;
  font-family: Droid Sans Fallback;
}
.font-28 {
  font-style: normal;
  font-size: 28rpx;
  font-family: Droid Sans Fallback;
}
.font-30 {
  font-style: normal;
  font-size: 30rpx;
  font-family: Droid Sans Fallback;
}
.font-32 {
  font-style: normal;
  font-size: 32rpx;
  font-family: Droid Sans Fallback;
}
.font-34 {
  font-style: normal;
  font-size: 34rpx;
  font-family: Droid Sans Fallback;
}
.font-36 {
  font-style: normal;
  font-size: 36rpx;
  font-family: Droid Sans Fallback;
}
.font-38 {
  font-style: normal;
  font-size: 38rpx;
  font-family: Droid Sans Fallback;
}
.font-40 {
  font-style: normal;
  font-size: 40rpx;
  font-family: Droid Sans Fallback;
}
.font-46 {
  font-style: normal;
  font-size: 46rpx;
  font-family: Droid Sans Fallback;
}
.font-50 {
  font-style: normal;
  font-size: 50rpx;
  font-family: Droid Sans Fallback;
}
.font-60 {
  font-style: normal;
  font-size: 60rpx;
  font-family: Droid Sans Fallback;
}
.font-80 {
  font-style: normal;
  font-size: 80rpx;
  font-family: Droid Sans Fallback;
}

// 字体对齐
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

// color相关
.color-white {
  color: #ffffff;
}
.color-red {
  color: #dc0000;
}

// 黑色色阶向下
.color-black {
  color: #000;
}
.color-black-3 {
  color: #333;
}
.color-black-6 {
  color: #666;
}
.color-black-9 {
  color: #999;
}

// 字体宽度
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: bold;
}

// 间隔
.spacing-20 {
  width: 750rpx;
  height: 20rpx;
  background-color: #f8f8f8;
}

// 圆角
.radius-10 {
  border-radius: 10rpx;
}
.radius-20 {
  border-radius: 20rpx;
}
.radius-30 {
  border-radius: 30rpx;
}
.radius-circle {
  border-radius: 50%;
}
.radius-height {
  border-radius: 10000px;
}

// flex相关
.vs-flex {
  display: flex;
}
.vs-flex-item {
  flex: 1;
}
.vs-space-between {
  justify-content: space-between;
}
.vs-space-around {
  justify-content: space-around;
}
.vs-space-center {
  justify-content: center;
}
.vs-space-end {
  justify-content: flex-end;
}
.vs-row {
  flex-direction: row;
}
.vs-column {
  flex-direction: column;
}
.vs-align-end {
  align-items: flex-end;
}
.vs-align-center {
  align-items: center;
}
.vs-align-start {
  align-items: flex-start;
}
.vs-item-hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.vs-btn-hover {
  opacity: 0.8;
}
.color-base {
  color: #56d39d;
}
.bg-color-base {
  background-color: #56d39d;
}

.container {
  position: relative;
}

.bg {
  position: relative;
  width: 100%;
  height: 400rpx;
	background: #56d39d url('https://qiniu-res.jintianwang.cc/2023/01/14/20230114130454-banner-icon.png') no-repeat;
	background-size: 60%;
	background-position-y: 60rpx;
	background-position-x: 300rpx;
}

.header-text{
	position: relative;
	color: #fff;
	width: 400px;
	height: 100rpx;
	line-height: 100rpx;
	left: 32rpx;
	top: 50rpx;
	font-size: 40rpx;
}

.tab {
  position: absolute;
  top: 250rpx;
  left: 20rpx;
  right: 20rpx;
  height: 150rpx;
  padding: 0 50rpx;
  background-color: #f5f5f5;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;

  &-bg {
    position: absolute;
    top: -200rpx;
    right: -50rpx;
    width: 440rpx;
    height: 285rpx;
  }
}

.line {
  width: 25rpx;
  height: 7rpx;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -10rpx;
}

.login,
.register {
  padding: 0 60rpx;
}

.input {
  width: 630rpx;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: rgba(80, 100, 235, 0.1);
  border-radius: 45rpx;

  &-icon {
    width: 30rpx;
    height: 38rpx;
  }

  &-placeholder {
    color: #56d39d;
  }
}

.button {
  width: 630rpx;
  height: 90rpx;
  margin-left: 60rpx;
  border-radius: 45rpx;
}

.separator {
  height: 2rpx;
  margin: 0 30rpx;
  background-color: #f5f5f5;
}

.other {
  &-items {
    padding: 0 200rpx;
  }

  &-icon {
    width: 50rpx;
    height: 50rpx;
  }
}

.footer-password {
  width: 100%;
  position: fixed;
  bottom: 40rpx;
  color: #888;
}
</style>
